<template>
    <div class="page_root" data-page-name="方案对比" data-page-identification="a_tx9teytees">
      <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
        <!-- begin vid_p88uon2g0x 自定义模板_gf28691ii7 -->
        <a-spin :spinning="loading">
          <div style="background-color: #f0f2f5">
            <div class="body">
              <div class="form">
                <a-form ref="form" :model="formData">
                  <a-row :gutter="24">
                    <a-col :span="6" style="margin-top: 16px">
                      <a-form-item label="方案一">
                        <a-select
                          placeholder="请选择方案一"
                          :options="filteredProgrammeList('second')"
                          showSearch
                          :filter-option="
                                                        (input, option) => {
                                                            return (
                                                                option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                            )
                                                        }
                                                    "
                          v-model:value="formData.first"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="6" style="margin-top: 16px">
                      <a-form-item label="方案二">
                        <a-select
                          placeholder="请选择方案二"
                          :options="filteredProgrammeList('first')"
                          showSearch
                          :filter-option="
                                                        (input, option) => {
                                                            return (
                                                                option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                            )
                                                        }
                                                    "
                          v-model:value="formData.second"
                        /> </a-form-item
                    ></a-col>
                    <a-col :span="6" style="margin-top: 16px">
                      <a-space>
                        <a-button class="btn-color" @click="handlerContrast">立即对比</a-button>
                        <a-button class="btn-color" @click="handlerExport">导出对比数据</a-button>
                      </a-space>
                    </a-col>
                  </a-row>
                </a-form>
              </div>
  
              <a-tabs v-model:activeKey="activeKey" @change="handlerTabChange">
                <a-tab-pane key="1" tab="方案对比分析">
                  <div
                    style="
                                            padding: 8px 20px 20px 20px;
                                            display: flex;
                                            justify-content: space-between;
                                            flex-direction: column;
                                        "
                  >
                    <div class="top-row">
                      <div class="top-pic">
                        <div class="title">总运费分析</div>
                        <div class="chart" ref="chart1"></div>
                      </div>
                      <div class="top-pic">
                        <div class="title">袋装运费分析</div>
                        <div class="chart" ref="chart2"></div>
                      </div>
                      <div class="top-pic">
                        <div class="title">散装运费分析</div>
                        <div class="chart" ref="chart3"></div>
                      </div>
                      <div class="top-pic">
                        <div class="title">熟料运费分析</div>
                        <div class="chart" ref="chart4"></div>
                      </div>
                    </div>
                    <div class="middle-row" :gutter="5">
                      <div class="middle-pic">
                        <div class="title">袋装路线运输量分析</div>
                        <div class="chart">
                          <div ref="chart5" class="chart1" />
                        </div>
                      </div>
                      <div class="middle-pic">
                        <div class="title">散装路线运输量分析</div>
                        <div class="chart"> </div>
  
                        <div ref="chart6" class="chart1" />
                      </div>
                      <div class="middle-pic">
                        <div class="title">熟料路线运输量分析</div>
                        <div class="chart1" ref="chart7"></div>
                      </div>
                      <div class="middle-pic">
                        <div class="title">配送平均单价分析</div>
                        <div class="chart" ref="chart8"></div>
                      </div>
                    </div>
                  </div>
                </a-tab-pane>
                <a-tab-pane key="2" tab="方案对比汇总分析" force-render>
                  <div class="second-main">
                    <a-table
                      :columns="columns1"
                      :dataSource="dataSource1"
                      bordered
                      :row-class-name="
                                                (_record, index) =>
                                                    index % 2 === 1 ? 'table-striped-even' : 'table-striped-odd'
                                            "
                      @resizeColumn="handleResizeColumn"
                      :pagination="pagination1"
                    />
                  </div>
                </a-tab-pane>
                <a-tab-pane key="3" tab="企业发货对比">
                  <div class="third-main">
                    <div class="third-div">
                      <a-form>
                        <a-row :gutter="24" style="height: 32px; line-height: 32px; margin-bottom: 16px">
                          <a-col :span="6">
                            <a-form-item label="企业名称"> <a-input v-model:value="filter3.name" placeholder="请输入企业名称" /> </a-form-item
                          ></a-col>
                          <a-col :span="4">
                            <a-space size="middle">
                              <a-button class="btn-color" @click="getSendTableData">查询</a-button>
                              <a-button @click="resetSendTable">重置</a-button>
                            </a-space>
                          </a-col>
                        </a-row>
                      </a-form>
                      <a-table
                        bordered
                        :row-class-name="
                                                    (_record, index) =>
                                                        index % 2 === 1 ? 'table-striped-even' : 'table-striped-odd'
                                                "
                        :columns="columns2"
                        :dataSource="dataSource2"
                        :pagination="pagination2"
                      />
                    </div>
                  </div>
                </a-tab-pane>
                <a-tab-pane key="4" tab="方案明细对比">
                  <div class="four-main">
                    <div class="four-div">
                      <a-form>
                        <a-row :gutter="40" style="height: 32px; line-height: 32px; margin-bottom: 16px">
                          <a-col :span="5">
                            <a-form-item label="企业名称"><a-input v-model:value="filter4.name" placeholder="请输入企业名称" /></a-form-item
                          ></a-col>
                          <a-col :span="5">
                            <a-form-item label="区域名称"><a-input v-model:value="filter4.areaName" placeholder="请输入区域名称" /></a-form-item
                          ></a-col>
                          <a-col :span="5">
                            <a-form-item label="运输方式"
                              ><a-select
                                placeholder="请选择运输方式"
                                v-model:value="filter4.transportType"
                                @mouseenter="getTransportList"
                                :options="[
                                                                    { label: '汽运', value: 'BUS' },
                                                                    { label: '火运', value: 'TRAIN' },
                                                                    { label: '船运', value: 'SHIP' }
                                                                ]" /></a-form-item
                          ></a-col>
                          <a-col :span="5">
                            <a-form-item label="包装类型"><a-select placeholder="请选择包装类型" v-model:value="filter4.packageType" :options="packageTypeList" @mouseenter="getPackList" /></a-form-item>
                          </a-col>
                          <a-col
                            :span="4"
                            style="
                                                            display: flex;
                                                            justify-content: end;
                                                            height: 32px;
                                                            line-height: 32px;
                                                        "
                          >
                            <a-space size="middle">
                              <a-button class="btn-color" @click="changeTable3">查询</a-button>
                              <a-button @click="resetTable3">重置</a-button>
                            </a-space>
                          </a-col>
                        </a-row>
                      </a-form>
                      <a-table
                        bordered
                        :row-class-name="
                                                    (_record, index) =>
                                                        index % 2 === 1 ? 'table-striped-even' : 'table-striped-odd'
                                                "
                        :columns="columns3"
                        :dataSource="dataSource3"
                        :scroll="{ x: 'max-content' }"
                        :pagination="pagination3"
                      />
                    </div>
                  </div>
                </a-tab-pane>
              </a-tabs>
            </div>
          </div>
        </a-spin>
        <!-- end vid_p88uon2g0x 自定义模板_gf28691ii7 -->
      </a-spin>
    </div>
  </template>
  <script setup>
    import {
        h, ref, reactive, toRaw, markRaw, watch, computed,
        onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
      } from "vue";
      import { useRoute, useRouter } from 'vue-router';
      const router = useRouter();
      const route = useRoute();
      import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
      import { cloneDeep, localGet, merge, getDifferenceArray, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission } from '@/utils/index';
      import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
      import dayjs from 'dayjs';
      import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
      import { message, notification, Modal } from 'ant-design-vue'
      import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format';
      /*** PUBLISH_EXEGESIS ***
      import UserTableRecords from '@/model/UserTableRecords';
      import { getAppBaseUrl } from '@/utils/index';
      import { sendToken } from "@/hooks/useIframeToken";
      *** PUBLISH_EXEGESIS ***/
  
  
  
        // 获取传入的流程ID
        const props = defineProps({
          processInstanceId: {
              type: String
          }
        })
        const immediateWatch = (source, callback) => {
          watch(source, callback, {deep: true,immediate: true })
        }
  
  
  
    /* -------------------------- 属性定义 -------------------------- */
  
        const setTimeOutList = [];
        const pageLoading = reactive({
          loading: false,
          tip: undefined
        });
        const authInfo = localGet('app-user-store');
  
  
  
  
        // 处理校验
        const setSubFormName =(parentInfo, name)=>{
          return [parentInfo.parents, parentInfo.cycleIndex, name];
        }
  
  
    /* ========================== 属性定义 ========================== */
  
  
    /* -------------------------- 元素数据引用 -------------------------- */
  
  
    /* ========================== 元素数据引用 ========================== */
  
  
    /* -------------------------- 页面数据 -------------------------- */
  
    /* ========================== 页面数据 ========================== */
  
  
    /* -------------------------- 响应 -------------------------- */
  
    /* ========================== 响应 ========================== */
  
  
    /* -------------------------- 函数 -------------------------- */
  
    /* ========================== 函数 ========================== */
  
  
    /* -------------------------- 页面参数 -------------------------- */
  
      const pageParameter_state = reactive({
          'processInstanceId': props.processInstanceId ?? route.query.processInstanceId,
      })
  
    /* ========================== 页面参数 ========================== */
  
  
    /* -------------------------- 组件事件处理方法 -------------------------- */
  
      // ---------------------------- 组件数据同步 ----------------------------
  
      // ============================ 组件数据同步 ============================
  
  
    /* ========================== 组件事件处理方法 ========================== */
  
  
    /* -------------------------- 生命周期 -------------------------- */
    onMounted(() => {
  
      });
  
      onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
          repeat ?  clearInterval(timer): clearTimeout(timer);
        });
      });
  
    /* ========================== 生命周期 ========================== */
  
  
    /* -------------------------- 数据关联处理 -------------------------- */
  
  
  
  
  
    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */
  
    /* ========================== 数据关联处理 ========================== */
  
  
    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */
  
    /* ========================== 不同组件自定义的处理逻辑 ========================== */
  
  
    // ================================定制化逻辑========================================
    const loading = ref(false)
            const optimizeDistributionId = ref(null)
            const manualDistributionId = ref(null)
            onMounted(() => {
                // 获取当前 URL 中问号后的参数部分
                const queryString = window.location.search
  
                // 使用 URLSearchParams 解析参数字符串
                const urlParams = new URLSearchParams(queryString)
  
                // 遍历参数并输出
                urlParams.forEach((value, key) => {
                    console.log(`${key}: ${value}`)
                })
  
                // 获取特定参数的值
                optimizeDistributionId.value = Number(urlParams.get('optimizeDistributionId'))
                manualDistributionId.value = Number(urlParams.get('manualDistributionId'))
                if (manualDistributionId.value && optimizeDistributionId.value) {
                    formData.first = manualDistributionId
                    formData.second = optimizeDistributionId
                    handlerContrast(optimizeDistributionId, manualDistributionId)
                }
                getProgrammeList()
            })
            function downloadExcel(response, name) {
                const blob = new Blob([response], {
                    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
                })
                const downloadElement = document.createElement('a')
                const href = window.URL.createObjectURL(blob) // 创建下载的链接
                downloadElement.href = href
                downloadElement.download = name // 下载后文件名
                document.body.appendChild(downloadElement)
                downloadElement.click() // 点击下载
                document.body.removeChild(downloadElement) // 下载完成移除万元素
                window.URL.revokeObjectURL(href)
                return href
            }
            function handlerExport() {
                if (!formData.first || !formData.second) {
                    message.info('请选择方案后再导出')
                } else {
                    const params = {
                        planOneId: manualDistributionId?.value ? manualDistributionId.value : formData.first,
                        planTwoId: optimizeDistributionId?.value ? optimizeDistributionId.value : formData.second
                    }
                    post('/solution-zjcnfsn-distribution/api/v1/distribution/export_compare_data', params, {
                        responseType: 'arraybuffer'
                    }).then(res => {
                        if (res.data) {
                            downloadExcel(res.data, '方案对比.xlsx')
                        } else {
                            downloadExcel(res, '方案对比.xlsx')
                        }
                    })
                }
            }
            function handlerTabChange(activeKey) {
                if (activeKey === '1') {
                    if (formData.first && formData.second) {
                        getTransportChart(optimizeDistributionId, manualDistributionId)
                        getTopChart(optimizeDistributionId, manualDistributionId)
                    } else {
                    }
                }
            }
            function handlerContrast(optimizeDistributionId, manualDistributionId) {
                if (!formData.first || !formData.second) {
                    message.info('请选择方案后再进行对比')
                } else {
                    getTopChart(optimizeDistributionId, manualDistributionId)
                    getTransportChart(optimizeDistributionId, manualDistributionId)
                    getPriceChart(optimizeDistributionId, manualDistributionId)
                    getSummaryData(optimizeDistributionId, manualDistributionId)
                    getSendTableData(optimizeDistributionId, manualDistributionId)
                    getDetailTableData(optimizeDistributionId, manualDistributionId)
                }
            }
            function getTransportChart(optimizeDistributionId, manualDistributionId) {
                loading.value = true
                const params = {
                    manualDistributionId: manualDistributionId?.value ? manualDistributionId.value : formData.first,
                    optimizeDistributionId: optimizeDistributionId?.value ? optimizeDistributionId.value : formData.second
                }
                post('/solution-zjcnfsn-distribution/api/v1/distribution/compare/transport/analysis', params).then(
                    ({ data, errorMsg }) => {
                        if (errorMsg) {
                            message.error(errorMsg)
                            loading.value = false
                        } else {
                            loading.value = false
                            chartData5.value = data
                            getChart5()
                            getChart6()
                            getChart7()
                        }
                    }
                )
            }
            function getPriceChart(optimizeDistributionId, manualDistributionId) {
                loading.value = true
                const params = {
                    manualDistributionId: manualDistributionId?.value ? manualDistributionId.value : formData.first,
                    optimizeDistributionId: optimizeDistributionId?.value ? optimizeDistributionId.value : formData.second
                }
                post('/solution-zjcnfsn-distribution/api/v1/distribution/compare/unit_price/analysis', params).then(
                    ({ data, errorMsg }) => {
                        if (errorMsg) {
                            message.error(errorMsg)
                            loading.value = false
                        } else {
                            getChart8(data)
                        }
                    }
                )
            }
            function getTopChart(optimizeDistributionId, manualDistributionId) {
                loading.value = true
                const params = {
                    manualDistributionId: manualDistributionId?.value ? manualDistributionId.value : formData.first,
                    optimizeDistributionId: optimizeDistributionId?.value ? optimizeDistributionId.value : formData.second
                }
                post('/solution-zjcnfsn-distribution/api/v1/distribution/compare/cost/analysis', params).then(
                    ({ data, errorMsg }) => {
                        if (errorMsg) {
                            message.error(errorMsg)
                            loading.value = false
                        } else {
                            loading.value = false
                            getChart1(data.totalList)
                            getChart2(data.baggedList)
                            getChart3(data.bulkList)
                            getChart4(data.clinkerList)
                        }
                    }
                )
            }
            function getSummaryData(optimizeDistributionId, manualDistributionId) {
                const params = {
                    manualDistributionId: manualDistributionId?.value ? manualDistributionId.value : formData.first,
                    optimizeDistributionId: optimizeDistributionId?.value ? optimizeDistributionId.value : formData.second,
                    distributionIdList: [
                        manualDistributionId?.value ? manualDistributionId.value : formData.first,
                        optimizeDistributionId?.value ? optimizeDistributionId.value : formData.second
                    ]
                }
                post('/solution-zjcnfsn-distribution/api/v1/distribution/compare/gather', params).then(({ data, errorMsg }) => {
                    if (errorMsg) {
                        message.error(errorMsg)
                        loading.value = false
                    } else {
                        dataSource1.value = data
                    }
                })
            }
            function getSendTableData(optimizeDistributionId, manualDistributionId) {
                const params = {
                    planOneId: manualDistributionId?.value ? manualDistributionId.value : formData.first,
                    planTwoId: optimizeDistributionId?.value ? optimizeDistributionId.value : formData.second,
                    enterpriseName: filter3.name ? filter3.name : ''
                }
  
                post('/solution-zjcnfsn-distribution/api/v1/distribution/enterprise_shipment_compare', params).then(
                    ({ data, errorMsg }) => {
                        if (errorMsg) {
                            message.error(errorMsg)
                            loading.value = false
                        } else {
                            dataSource2.value = data
                            pagination2.current = 1
                        }
                    }
                )
            }
            function resetSendTable() {
                filter3.name = ''
                getSendTableData()
            }
            function getDetailTableData(optimizeDistributionId, manualDistributionId) {
                const params = {
                    planOneId: manualDistributionId?.value ? manualDistributionId.value : formData.first,
                    planTwoId: optimizeDistributionId?.value ? optimizeDistributionId.value : formData.second,
                    enterpriseName: filter4.name ? filter4.name : '',
                    areaName: filter4.areaName ? filter4.areaName : '',
                    transportType: filter4.transportType ? filter4.transportType : null,
                    packingTypeId: filter4.packageType ? filter4.packageType : null
                }
                post('/solution-zjcnfsn-distribution/api/v1/distribution/plan_details_compare', params).then(
                    ({ data, errorMsg }) => {
                        if (errorMsg) {
                            message.error(errorMsg)
                            loading.value = false
                        } else {
                            dataSource3.value = data
                            pagination3.current = 1
                        }
                    }
                )
            }
            const pagination1 = reactive({
                current: 1,
                pageSize: 10,
                showSizeChanger: true,
                total: 0, // Assuming a total of 100 items for demonstration
                pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
                showTotal: total => `共 ${total} 个项目,第${pagination1.current} / ${Math.ceil(total / pagination1.pageSize)}页`,
                onChange: table1Change,
                onShowSizeChange: table1PageSizeChange
            })
            const pagination2 = reactive({
                current: 1,
                pageSize: 10,
                showSizeChanger: true,
                total: 0, // Assuming a total of 100 items for demonstration
                pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
                showTotal: total => `共 ${total} 个项目,第${pagination2.current} / ${Math.ceil(total / pagination2.pageSize)}页`,
                onChange: table2Change,
                onShowSizeChange: table2PageSizeChange
            })
            const pagination3 = reactive({
                current: 1,
                pageSize: 10,
                showSizeChanger: true,
                total: 0, // Assuming a total of 100 items for demonstration
                pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
                showTotal: total => `共 ${total} 个项目,第${pagination3.current} / ${Math.ceil(total / pagination3.pageSize)}页`,
                onChange: table3Change,
                onShowSizeChange: table3PageSizeChange
            })
            function table1Change(val) {
                pagination1.current = val
            }
            function table3Change(val) {
                pagination3.current = val
            }
            function table2Change(val) {
                pagination2.current = val
            }
            function table1PageSizeChange(current, val) {
                pagination1.pageSize = val
                pagination1.current = 1
            }
            function table2PageSizeChange(current, val) {
                pagination2.pageSize = val
                pagination2.current = 1
            }
            function table3PageSizeChange(current, val) {
                pagination3.pageSize = val
                pagination3.current = 1
            }
            function getProgrammeList() {
                const params = {
                    filter: {},
                    pageNo: 1,
                    pageSize: 1000
                }
                post('/solution-zjcnfsn-distribution/api/v1/distribution/search', params).then(({ errorMsg, data }) => {
                    if (errorMsg) {
                        message.error(errorMsg)
                    } else {
                        programmeList.value = data.content.map(item => {
                            return {
                                label: item.name,
                                value: item.id
                            }
                        })
                    }
                })
            }
            const handleFirstSelectChange = value => {
                formData.first = value
                filterOptions('second', value)
            }
  
            const handleSecondSelectChange = value => {
                formData.second = value
                filterOptions('first', value)
            }
  
            const filterOptions = (target, selectedValue) => {
                const otherSelect = formData[target]
                const selectedOption = programmeList.value.find(option => option.value === selectedValue)
                programmeList.value = programmeList.value.filter(
                    option => option.value !== otherSelect || option.value === selectedValue
                )
                if (selectedOption) {
                    programmeList.value.push(selectedOption)
                }
            }
  
            const filteredProgrammeList = target => {
                const otherSelect = formData[target]
                return programmeList.value.filter(option => option.value !== otherSelect)
            }
            const activeKey = ref('1')
            const formData = reactive({
                first: undefined,
                second: undefined
            })
            import * as echarts from 'echarts'
            const state = reactive({
                value1: 'baggedList',
                value2: ''
            })
            const programmeList = ref([])
            const programmeList2 = ref([])
            const chart1 = ref(null)
            const chart2 = ref(null)
            const chart3 = ref(null)
            const chart4 = ref(null)
            const chart5 = ref(null)
            const chart6 = ref(null)
            const chart7 = ref(null)
            const chart8 = ref(null)
            const chartData5 = ref({})
            function getChart1(data) {
                const option = {
                    color: ['#D7000F', '#8C8C8C'],
                    title: {
                        text: ' ',
                        subtext: '万元'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            let tooltip = params[0].name + '<br/>'
                            params.forEach(function (item) {
                                tooltip += item.seriesName + '：' + item.value.toFixed(2) + ' 万元<br/>'
                            })
                            return tooltip
                        }
                    },
                    legend: {
                        icon: 'cercle'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLabel: {
                            formatter: '{value}' // 只显示数值，不显示单位
                        },
                        axisPointer: {
                            label: {
                                formatter: '{value} 万元' // 在轴上显示万元单位
                            }
                        }
                    },
                    legend: {
                        top: 20 // 控制图例与容器顶部的距离
                    },
                    xAxis: {
                        type: 'category',
                        data: (data ?? []).map(item => item.xaxis),
                        axisLabel: {
                            interval: 0
                            // rotate: 45 // 设置标签旋转角度为 45 度
                            // fontSize:10
                        }
                    },
  
                    series: [
                        {
                            name: '方案一',
                            barWidth: 10,
                            type: 'bar',
                            // label: {
                            //     show: true,
                            //     position: 'top',
                            //     formatter: '{c}' // 显示数值
                            // },
                            data: (data ?? []).map(item => item.manualCount)
                        },
                        {
                            name: '方案二',
                            barWidth: 10,
                            type: 'bar',
                            // label: {
                            //     show: true,
                            //     position: 'top',
                            //     formatter: '{c}' // 显示数值
                            // },
                            data: (data ?? []).map(item => item.optimizeCount)
                        }
                    ]
                }
                echarts.dispose(chart1.value)
                const chart = echarts.init(chart1.value)
                chart.setOption(option)
            }
            function getChart2(data) {
                const option = {
                    color: ['#D7000F', '#8C8C8C'],
                    title: {
                        text: ' ',
                        subtext: '万元'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            let tooltip = params[0].name + '<br/>'
                            params.forEach(function (item) {
                                tooltip += item.seriesName + '：' + item.value.toFixed(2) + ' 万元<br/>'
                            })
                            return tooltip
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLabel: {
                            formatter: '{value}' // 只显示数值，不显示单位
                        },
                        axisPointer: {
                            label: {
                                formatter: '{value} 万元' // 在轴上显示万元单位
                            }
                        }
                    },
                    legend: {
                        top: 20 // 控制图例与容器顶部的距离
                    },
                    xAxis: {
                        type: 'category',
                        data: (data ?? []).map(item => item.xaxis),
                        axisLabel: {
                            interval: 0
                        }
                    },
                    series: [
                        {
                            name: '方案一',
                            barWidth: 10,
                            type: 'bar',
                            // label: {
                            //     show: true,
                            //     position: 'top',
                            //     formatter: '{c}' // 显示数值
                            // },
                            data: (data ?? []).map(item => item.manualCount)
                        },
                        {
                            name: '方案二',
                            barWidth: 10,
                            type: 'bar',
                            // label: {
                            //     show: true,
                            //     position: 'top',
                            //     formatter: '{c}' // 显示数值
                            // },
  
                            data: (data ?? []).map(item => item.optimizeCount)
                        }
                    ]
                }
                echarts.dispose(chart2.value)
                const chart = echarts.init(chart2.value)
                chart.setOption(option)
            }
            function getChart3(data) {
                const option = {
                    color: ['#D7000F', '#8C8C8C'],
                    title: {
                        text: ' ',
                        subtext: '万元'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            let tooltip = params[0].name + '<br/>'
                            params.forEach(function (item) {
                                tooltip += item.seriesName + '：' + item.value.toFixed(2) + ' 万元<br/>'
                            })
                            return tooltip
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLabel: {
                            formatter: '{value}' // 只显示数值，不显示单位
                        },
                        axisPointer: {
                            label: {
                                formatter: '{value} 万元' // 在轴上显示万元单位
                            }
                        }
                    },
                    legend: {
                        top: 20 // 控制图例与容器顶部的距离
                    },
                    xAxis: {
                        type: 'category',
                        data: (data ?? []).map(item => item.xaxis),
                        axisLabel: {
                            interval: 0
                        }
                    },
                    series: [
                        {
                            name: '方案一',
                            barWidth: 10,
                            type: 'bar',
                            // label: {
                            //     show: true,
                            //     position: 'top',
                            //     formatter: '{c}' // 显示数值
                            // },
                            data: (data ?? []).map(item => item.manualCount)
                        },
                        {
                            name: '方案二',
                            barWidth: 10,
                            type: 'bar',
                            // label: {
                            //     show: true,
                            //     position: 'top',
                            //     formatter: '{c}' // 显示数值
                            // },
                            data: (data ?? []).map(item => item.optimizeCount)
                        }
                    ]
                }
                echarts.dispose(chart3.value)
                const chart = echarts.init(chart3.value)
                chart.setOption(option)
            }
            function getChart4(data) {
                const option = {
                    color: ['#D7000F', '#8C8C8C'],
                    title: {
                        text: ' ',
                        subtext: '万元'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            let tooltip = params[0].name + '<br/>'
                            params.forEach(function (item) {
                                tooltip += item.seriesName + '：' + item.value.toFixed(2) + ' 万元<br/>'
                            })
                            return tooltip
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLabel: {
                            formatter: '{value}' // 只显示数值，不显示单位
                        },
                        axisPointer: {
                            label: {
                                formatter: '{value} 万元' // 在轴上显示万元单位
                            }
                        }
                    },
                    legend: {
                        top: 20 // 控制图例与容器顶部的距离
                    },
                    xAxis: {
                        type: 'category',
                        data: (data ?? []).map(item => item.xaxis),
                        axisLabel: {
                            interval: 0
                        }
                    },
                    series: [
                        {
                            name: '方案一',
                            barWidth: 10,
                            type: 'bar',
                            // label: {
                            //     show: true,
                            //     position: 'top',
                            //     formatter: '{c}' // 显示数值
                            // },
                            data: (data ?? []).map(item => item.manualCount)
                        },
                        {
                            name: '方案二',
                            barWidth: 10,
                            type: 'bar',
                            // label: {
                            //     show: true,
                            //     position: 'top',
                            //     formatter: '{c}' // 显示数值
                            // },
                            data: (data ?? []).map(item => item.optimizeCount)
                        }
                    ]
                }
                echarts.dispose(chart4.value)
                const chart = echarts.init(chart4.value)
                chart.setOption(option)
            }
  
            function getChart5() {
                const { baggedList, bulkList, clinkerList, totalList } = chartData5.value
                const option = {
                    color: ['#D7000F', '#8C8C8C'],
                    title: {
                        text: ' ',
                        subtext: '万吨'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            let tooltip = params[0].name + '<br/>'
                            params.forEach(function (item) {
                                tooltip += item.seriesName + '：' + item.value.toFixed(2) + ' 万吨<br/>'
                            })
                            return tooltip
                        }
                    },
                    legend: {
                        top: 20 // 控制图例与容器顶部的距离
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
  
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLabel: {
                            formatter: '{value}' // 只显示数值，不显示单位
                        },
                        axisPointer: {
                            label: {
                                formatter: '{value} 万吨' // 在轴上显示万元单位
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: baggedList.map(item => item.xaxis),
                        axisLabel: {
                            interval: 0
                        }
                    },
                    series: [
                        {
                            name: '方案一',
                            barWidth: 10,
                            type: 'bar',
                            // label: {
                            //     show: true,
                            //     position: 'top',
                            //     formatter: '{c}' // 显示数值
                            // },
                            data: baggedList.map(item => item.manualCount)
                        },
                        {
                            name: '方案二',
                            barWidth: 10,
                            type: 'bar',
                            // label: {
                            //     show: true,
                            //     position: 'top',
                            //     formatter: '{c}' // 显示数值
                            // },
                            data: baggedList.map(item => item.optimizeCount)
                        }
                    ]
                }
                echarts.dispose(chart5.value)
                echarts.init(chart5.value).setOption(option)
            }
            function getChart6() {
                const { bulkList } = chartData5.value
                const option = {
                    color: ['#D7000F', '#8C8C8C'],
                    title: {
                        text: ' ',
                        subtext: '万吨'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            let tooltip = params[0].name + '<br/>'
                            params.forEach(function (item) {
                                tooltip += item.seriesName + '：' + item.value.toFixed(2) + ' 万吨<br/>'
                            })
                            return tooltip
                        }
                    },
                    legend: {
                        top: 20 // 控制图例与容器顶部的距离
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
  
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLabel: {
                            formatter: '{value}' // 只显示数值，不显示单位
                        },
                        axisPointer: {
                            label: {
                                formatter: '{value} 万吨' // 在轴上显示万元单位
                            }
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: bulkList.map(item => item.xaxis),
                        axisLabel: {
                            interval: 0
                        }
                    },
                    series: [
                        {
                            name: '方案一',
                            barWidth: 10,
                            type: 'bar',
                            // label: {
                            //     show: true,
                            //     position: 'top',
                            //     formatter: '{c}' // 显示数值
                            // },
                            data: bulkList.map(item => item.manualCount)
                        },
                        {
                            name: '方案二',
                            barWidth: 10,
                            type: 'bar',
                            // label: {
                            //     show: true,
                            //     position: 'top',
                            //     formatter: '{c}' // 显示数值
                            // },
                            data: bulkList.map(item => item.optimizeCount)
                        }
                    ]
                }
                echarts.dispose(chart6.value)
                echarts.init(chart6.value).setOption(option)
            }
            function getChart7() {
                const { clinkerList } = chartData5.value
                const option = {
                    color: ['#D7000F', '#8C8C8C'],
                    title: {
                        text: ' ',
                        subtext: '万吨'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            let tooltip = params[0].name + '<br/>'
                            params.forEach(function (item) {
                                tooltip += item.seriesName + '：' + item.value.toFixed(2) + ' 万吨<br/>'
                            })
                            return tooltip
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLabel: {
                            formatter: '{value}' // 只显示数值，不显示单位
                        },
                        axisPointer: {
                            label: {
                                formatter: '{value} 万吨' // 在轴上显示万元单位
                            }
                        }
                    },
                    legend: {
                        top: 20 // 控制图例与容器顶部的距离
                    },
                    xAxis: {
                        type: 'category',
                        data: clinkerList.map(item => item.xaxis),
                        axisLabel: {
                            interval: 0
                        }
                    },
                    series: [
                        {
                            name: '方案一',
                            barWidth: 10,
                            type: 'bar',
                            // label: {
                            //     show: true,
                            //     position: 'top',
                            //     formatter: '{c}' // 显示数值
                            // },
                            data: clinkerList.map(item => item.manualCount)
                        },
                        {
                            name: '方案二',
                            barWidth: 10,
                            type: 'bar',
                            // label: {
                            //     show: true,
                            //     position: 'top',
                            //     formatter: '{c}' // 显示数值
                            // },
                            data: clinkerList.map(item => item.optimizeCount)
                        }
                    ]
                }
                echarts.dispose(chart7.value)
                const chart = echarts.init(chart7.value)
                chart.setOption(option)
            }
            function getChart8(data) {
                const option = {
                    color: ['#D7000F', '#8C8C8C'],
                    title: {
                        text: ' ',
                        subtext: '元'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        formatter: function (params) {
                            let tooltip = params[0].name + '<br/>'
                            params.forEach(function (item) {
                                tooltip += item.seriesName + '：' + item.value.toFixed(2) + ' 元<br/>'
                            })
                            return tooltip
                        }
                    },
                    legend: {},
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        axisLabel: {
                            formatter: '{value}' // 只显示数值，不显示单位
                        },
                        axisPointer: {
                            label: {
                                formatter: '{value} 元' // 在轴上显示万元单位
                            }
                        }
                    },
                    legend: {
                        top: 20 // 控制图例与容器顶部的距离
                    },
                    xAxis: {
                        type: 'category',
                        data: data.map(item => item.xaxis),
                        axisLabel: {
                            interval: 0
                        }
                    },
                    series: [
                        {
                            name: '方案一',
                            barWidth: 10,
                            type: 'bar',
                            // label: {
                            //     show: true,
                            //     position: 'top',
                            //     formatter: '{c}' // 显示数值
                            // },
                            data: data.map(item => item.manualCount)
                        },
                        {
                            name: '方案二',
                            barWidth: 10,
                            type: 'bar',
                            // label: {
                            //     show: true,
                            //     position: 'top',
                            //     formatter: '{c}' // 显示数值
                            // },
                            data: data.map(item => item.optimizeCount)
                        }
                    ]
                }
                echarts.dispose(chart8.value)
                const chart = echarts.init(chart8.value)
                chart.setOption(option)
            }
            /**********************************  页面1 end  ****************************************/
            /**********************************  页面2 start  ****************************************/
            /**********************************  页面2 end  ****************************************/
            /**********************************  页面3 start  ****************************************/
            const filter3 = reactive({
                name: ''
            })
            const columns1 = [
                {
                    title: '包装类型',
                    key: 'name',
                    dataIndex: 'category',
                    children: [],
                    width: 200,
                    resizable: true
                },
                {
                    title: '发货量（吨）',
                    resizable: true,
  
                    width: 450,
                    children: [
                        {
                            title: '方案一',
                            dataIndex: 'planOneQuantity',
                            resizable: true,
  
                            width: 150,
                            children: []
                        },
  
                        {
                            title: '方案二',
                            dataIndex: 'planTwoQuantity',
                            resizable: true,
                            width: 150,
  
                            children: []
                        },
                        {
                            title: '差值',
                            dataIndex: 'quantityDifference',
                            resizable: true,
                            width: 150,
  
                            children: []
                        }
                    ]
                },
                {
                    title: '方案运费（元）',
                    resizable: true,
                    width: 450,
  
                    children: [
                        {
                            title: '方案一',
                            dataIndex: 'manualFreight',
                            resizable: true,
                            width: 150,
  
                            children: []
                        },
  
                        {
                            title: '方案二',
                            dataIndex: 'optimizedFreight',
                            resizable: true,
                            width: 150,
  
                            children: []
                        },
                        {
                            title: '差值',
                            dataIndex: 'freightDifference',
                            resizable: true,
                            width: 150,
  
                            children: []
                        }
                    ]
                },
                {
                    title: '方案平均运费（元）',
                    resizable: true,
                    width: 450,
  
                    children: [
                        {
                            title: '方案一',
                            dataIndex: 'manualFreightAvg',
                            resizable: true,
                            width: 150,
  
                            children: []
                        },
  
                        {
                            title: '方案二',
                            dataIndex: 'optimizedFreightAvg',
                            resizable: true,
  
                            width: 150,
                            children: []
                        },
                        {
                            title: '差值',
                            dataIndex: 'freightAvgDifference',
                            resizable: true,
                            width: 150,
  
                            children: []
                        }
                    ]
                }
            ]
            const dataSource1 = ref([])
            const columns2 = [
                {
                    title: '企业名称',
                    key: 'name',
                    dataIndex: 'enterpriseName',
                    children: [],
                    resizable: true
                },
                {
                    title: '发货量（吨）',
                    dataIndex: 'totalNum',
                    children: [
                        {
                            title: '方案一',
                            dataIndex: 'planOneQuantity',
                            resizable: true,
  
                            sorter: (a, b) => a.planOneQuantity - b.planOneQuantity,
                            children: []
                        },
  
                        {
                            title: '方案二',
                            dataIndex: 'planTwoQuantity',
                            resizable: true,
  
                            sorter: (a, b) => a.planTwoQuantity - b.planTwoQuantity,
                            children: []
                        },
                        {
                            title: '差值',
                            dataIndex: 'quantityDifference',
                            resizable: true,
  
                            sorter: (a, b) => a.quantityDifference - b.quantityDifference,
                            children: []
                        }
                    ]
                },
                // {
                //     title:'约束量',
                //     dataIndex: 'constraintAmount',
                //     resizable: true,
                //     children: []
                // },
                {
                    title: '去除约束优化量占比（%）',
                    dataIndex: 'yunfei',
                    resizable: true,
  
                    children: [
                        {
                            title: '方案一',
                            dataIndex: 'planOneRemoveConstraintsPercentage',
                            resizable: true,
  
                            sorter: (a, b) => a.planOneRemoveConstraintsPercentage - b.planOneRemoveConstraintsPercentage,
                            children: []
                        },
  
                        {
                            title: '方案二',
                            dataIndex: 'planTwoRemoveConstraintsPercentage',
                            resizable: true,
  
                            sorter: (a, b) => a.planTwoRemoveConstraintsPercentage - b.planTwoRemoveConstraintsPercentage,
                            children: []
                        },
                        {
                            title: '差值',
                            dataIndex: 'removeConstraintsPercentageDifference',
                            sorter: (a, b) => a.removeConstraintsPercentageDifference - b.removeConstraintsPercentageDifference,
                            resizable: true,
  
                            children: []
                        }
                    ]
                },
                {
                    title: '平均运价（元/吨）',
                    dataIndex: 'yunfeipj',
                    resizable: true,
  
                    children: [
                        {
                            title: '方案一',
                            dataIndex: 'planOneAverageFare',
                            resizable: true,
  
                            sorter: (a, b) => a.planOneAverageFare - b.planOneAverageFare,
                            children: []
                        },
  
                        {
                            title: '方案二',
                            dataIndex: 'planTwoAverageFare',
                            resizable: true,
  
                            sorter: (a, b) => a.planTwoAverageFare - b.planTwoAverageFare,
                            children: []
                        },
                        {
                            title: '差值',
                            dataIndex: 'averageFareDifference',
                            resizable: true,
  
                            sorter: (a, b) => a.averageFareDifference - b.averageFareDifference,
                            children: []
                        }
                    ]
                },
                {
                    title: '平均出厂价（元/吨）',
                    dataIndex: '',
                    resizable: true,
  
                    children: [
                        {
                            title: '方案一',
                            dataIndex: 'planOneAverageFactoryPrice',
                            resizable: true,
  
                            sorter: (a, b) => a.planOneAverageFactoryPrice - b.planOneAverageFactoryPrice,
                            children: []
                        },
  
                        {
                            title: '方案二',
                            dataIndex: 'planTwoAverageFactoryPrice',
                            resizable: true,
  
                            sorter: (a, b) => a.planTwoAverageFactoryPrice - b.planTwoAverageFactoryPrice,
                            children: []
                        },
                        {
                            title: '差值',
                            dataIndex: 'averageFactoryPriceDifference',
                            resizable: true,
  
                            sorter: (a, b) => a.averageFactoryPriceDifference - b.averageFactoryPriceDifference,
                            children: []
                        }
                    ]
                }
            ]
  
            const dataSource2 = ref([])
  
            /**********************************  页面3 end  ****************************************/
            /**********************************  页面4start  ****************************************/
            const filter4 = reactive({
                name: '',
                areaName: '',
                transportType: undefined,
                packageType: undefined
            })
            const transportList = ref([])
            const packageTypeList = ref([])
            const columns3 = [
                {
                    title: '企业名称',
                    resizable: true,
  
                    fixed: 'left',
                    dataIndex: 'enterpriseName'
                },
                {
                    title: '区域名称',
                    resizable: true,
  
                    fixed: 'left',
                    dataIndex: 'areaName'
                },
                {
                    title: '运输方式',
                    resizable: true,
  
                    fixed: 'left',
                    dataIndex: 'transportTypeName'
                },
                {
                    title: '包装类型',
                    resizable: true,
                    fixed: 'left',
  
                    dataIndex: 'packingTypeName'
                },
                {
                    title: '品牌',
                    resizable: true,
  
                    fixed: 'left',
                    dataIndex: 'brandName'
                },
                {
                    title: '品种',
                    resizable: true,
                    fixed: 'left',
                    dataIndex: 'category'
                },
                {
                    title: '运价（元）',
                    resizable: true,
                    dataIndex: 'freightUnit'
                },
                {
                    title: '出厂价（元）',
                    resizable: true,
  
                    dataIndex: 'factoryPrice'
                },
  
                {
                    title: '发货量（吨）',
                    dataIndex: 'yunfei',
                    resizable: true,
  
                    children: [
                        {
                            title: '方案一',
                            dataIndex: 'planOneQuantity',
                            resizable: true,
  
                            sorter: (a, b) => a.planOneQuantity - b.planOneQuantity,
                            children: []
                        },
  
                        {
                            title: '方案二',
                            dataIndex: 'planTwoQuantity',
                            resizable: true,
  
                            sorter: (a, b) => a.planTwoQuantity - b.planTwoQuantity,
                            children: []
                        },
                        {
                            title: '差值',
                            dataIndex: 'quantityDifference',
                            resizable: true,
  
                            sorter: (a, b) => a.quantityDifference - b.quantityDifference,
                            children: []
                        }
                    ]
                },
                {
                    title: '约束量（吨）',
                    dataIndex: 'yunfei',
                    resizable: true,
  
                    children: [
                        {
                            title: '方案一',
                            dataIndex: 'planOneConstraintAmount',
                            resizable: true,
  
                            sorter: (a, b) => a.planOneConstraintAmount - b.planOneConstraintAmount,
                            children: []
                        },
  
                        {
                            title: '方案二',
                            dataIndex: 'planTwoConstraintAmount',
                            resizable: true,
  
                            sorter: (a, b) => a.planTwoConstraintAmount - b.planTwoConstraintAmount,
                            children: []
                        },
                        {
                            title: '差值',
                            dataIndex: 'constraintAmountDifference',
                            resizable: true,
  
                            sorter: (a, b) => a.constraintAmountDifference - b.constraintAmountDifference,
                            children: []
                        }
                    ]
                },
                {
                    title: '运费（元）',
                    dataIndex: 'yunfeipj',
                    resizable: true,
  
                    children: [
                        {
                            title: '方案一',
                            dataIndex: 'planOneFreight',
                            sorter: (a, b) => a.planOneFreight - b.planOneFreight,
                            resizable: true,
  
                            children: []
                        },
  
                        {
                            title: '方案二',
                            dataIndex: 'planTwoFreight',
                            sorter: (a, b) => a.planTwoFreight - b.planTwoFreight,
                            resizable: true,
  
                            children: []
                        },
                        {
                            title: '差值',
                            dataIndex: 'freightDifference',
                            sorter: (a, b) => a.freightDifference - b.freightDifference,
                            resizable: true,
  
                            children: []
                        }
                    ]
                },
                {
                    title: '出厂额（元）',
                    dataIndex: 'yunfeipj',
                    resizable: true,
  
                    children: [
                        {
                            title: '方案一',
                            dataIndex: 'planOneFactoryAmount',
                            sorter: (a, b) => a.planOneFactoryAmount - b.planOneFactoryAmount,
                            resizable: true,
  
                            children: []
                        },
  
                        {
                            title: '方案二',
                            dataIndex: 'planTwoFactoryAmount',
                            sorter: (a, b) => a.planTwoFactoryAmount - b.planTwoFactoryAmount,
                            resizable: true,
  
                            children: []
                        },
                        {
                            title: '差值',
                            dataIndex: 'factoryAmountDifference',
                            sorter: (a, b) => a.factoryAmountDifference - b.factoryAmountDifference,
                            resizable: true,
  
                            children: []
                        }
                    ]
                }
            ]
            const dataSource3 = ref([])
            let dataSource3Clone = ref([])
            function changeTable3() {
                getDetailTableData()
                pagination3.current = 1
            }
            function resetTable3() {
                filter4.name = ''
                filter4.areaName = ''
                filter4.transportType = null
                filter4.packageType = null
                getDetailTableData()
            }
            function getTransportList() {}
            function getPackList() {
                const params = {
                    filter: {
                        baseTypeId: 1
                    },
                    pageNo: 1,
                    pageSize: 100000
                }
                post('/solution-zjcnfsn-distribution/api/v1/base_info/search', params).then(({ data, errorMsg }) => {
                    if (errorMsg) {
                        message.error(errorMsg)
                    } else {
                        packageTypeList.value = data.content.map(item => {
                            return {
                                label: item.name,
                                value: item.id
                            }
                        })
                    }
                })
            }
            function handleResizeColumn(w, col) {
                console.log(col)
                console.log(w)
                col.width = w
            }
  </script>
  <style lang="less" scoped>
    .page_root {
    width: 100%;
    height: 100%;
    overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container)
     {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper)
     {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table)
     {
      flex: auto;
      overflow: auto;
    }
    .table-moreBtn_down {
      overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
    }
  
    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
      background: #ebf1ff;
    }
  
    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
      z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
      left: 15px !important;
      width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
      left: 30px !important;
      width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
      left: 45px !important;
      width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
      left: 60px !important;
      width: calc(100% - 60px);
    }
  
    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list)
     {
        height: 100%;
        width: 50%;
    }
  
  
    .body {
        height: fill-available;
        height: -webkit-fill-available;
        padding: 20px;
    }
    .body > * {
        background: #fff;
    }
    .content {
        height: 100%;
    }
    .form {
        padding: 0 20px;
        height: 64px;
        line-height: 64px;
        margin-bottom: 15px;
        border-radius: 6px;
    }
    .top-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .middle-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    /deep/.ant3-tabs {
        background-color: #fff;
        border-radius: 6px;
    }
    .top-pic {
        width: 24%;
        display: flex;
        flex-direction: column;
        height: 300px;
        padding: 16px;
        background: #ffffff;
        border: 1px solid rgba(217, 217, 217, 1);
        box-shadow: 0px 0px 10px 0px rgba(235, 235, 235, 1);
        border-radius: 4px;
    }
    .middle-pic {
        width: 24%;
        display: flex;
        flex-direction: column;
        height: 300px;
        background-color: #fff;
        padding: 16px;
        background: #ffffff;
        border: 1px solid rgba(217, 217, 217, 1);
        box-shadow: 0px 0px 10px 0px rgba(235, 235, 235, 1);
        border-radius: 4px;
    }
    .bottom-pic {
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 6px;
        padding: 10px;
        box-shadow: 0px 0px 8px 0px #ccd7e9;
    }
    .title {
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
        background: #ebebeb;
        border-radius: 2px;
        padding: 0 20px;
        text-align: center;
    }
    .chart {
        width: 100%;
        height: 220px;
        flex: 1;
        position: relative;
    }
    .chart1 {
        height: 220px;
    }
    .tab-page {
        min-height: 100%;
    }
    .group-radio {
        position: absolute;
        right: 10px;
        top: 20px;
        z-index: 999;
    }
    .table-header {
        margin: 0 0 20px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-indent: 10px;
    }
    /deep/ .ant3-table-cell{
        color: #262626;
    }
    .table-header.tag {
        border-left: 8px solid #1890ff;
    }
    :deep(.@{ant-prefix}-table-thead) > tr > th {
        background-color: #f5f5f5;
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 600;
        color: #262626;
        padding: 0 24px !important;
        height: 40px;
    }
  
    .third-div,
    .four-div {
        background-color: #fff;
        padding-top: 24px;
        padding: 0 20px;
    }
    .third-table,
    .four-table {
        padding: 0 20px 20px 20px;
        background-color: #fff;
    }
    .second-main {
        padding: 8px 20px 20px 20px;
    }
    .third-main,
    .four-main {
        background-color: #f0f2f5;
        border-radius: 6px;
    }
    /deep/ .ant3-table-cell {
        padding: 8px 16px;
    }
    /deep/.ant3-tabs-tab {
        margin-left: 20px;
        border-radius: 6px;
    }
    .btn-color {
        background-color: #e02020;
        color: #fff;
        border: none;
    }
    .border-btn {
        border: 1px solid #e02020;
        color: #e02020;
    }
    /deep/.ant3-form-item-label > label {
        font-weight: normal;
        color: #595959;
    }
    /deep/.ant3-tabs-tab.ant3-tabs-tab-active .ant3-tabs-tab-btn {
        color: #e02020;
    }
    /deep/.ant3-tabs-tab-btn {
        color: #595959;
    }
    /deep/.ant3-tabs-ink-bar {
        background-color: #e02020;
    }
    /deep/.ant3-tabs-tab:hover {
        color: #e02020;
    }
    /deep/.ant3-select-single.ant3-select-show-arrow .ant3-select-selection-item,
    .ant3-select-single.ant3-select-show-arrow .ant3-select-selection-placeholder {
        color: #262626;
        font-weight: 600;
    }
    :deep(.table-striped-even) td {
        background-color: #fafafa;
        padding-left: 24px !important;
    }
    :deep(.table-striped-odd) td {
        background-color: #ffffff;
        padding-left: 24px !important;
    }
    /deep/.ant3-tabs > .ant3-tabs-nav .ant3-tabs-nav-wrap,
    .ant3-tabs > div > .ant3-tabs-nav .ant3-tabs-nav-wrap {
        border-bottom: 1px solid #d9d9d9;
    }
    .border-btn {
        border: 1px solid #d9d9d9;
        color: #595959;
    }
    .red-btn {
          border: 1px solid #e02020;
          color: #e02020;
      }
  </style>
  